<template>
  <el-card class="register">
    <div class="avatar">
      <img src="../../../assets/img/auth/购物.png" alt="" />
    </div>
    <h1>用户注册</h1>
    <el-form :rules="registerRules" :model="registerForm">
      <el-form-item prop="mobile">
        <el-input
          v-model="registerForm.mobile"
          placeholder="手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="registerForm.password"
          show-password
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input
          v-model="registerForm.confirmPassword"
          show-password
          placeholder="重复密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="handleSubmit">注册</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '../../../store'
import { useErrors } from '../../../composable/useErrors'
import { RegisterForm } from '../../../services/auth'

const store = useStore()
const router = useRouter()
const { query } = useRoute()
const { errors, errorHandler } = useErrors()

// 保存注册需要的数据
const registerForm = reactive<RegisterForm>({
  mobile: '',
  password: '',
  confirmPassword: ''
})

// 如果用户已经登录，跳转到首页
onMounted(async () => {
  if (store.state.currentUser) {
    router.push('/')
  }
})

// 提交注册信息
async function handleSubmit() {
  try {
    if (registerForm.password !== registerForm.confirmPassword) {
      throw new Error('确认密码不一致')
    }

    await store.dispatch('register', registerForm)
    await router.push((query.returnUrl as string) ?? '/items')
  } catch (err) {
    errorHandler(err)
  }
}

const checkphonenumber = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入手机号'))
  }
  const re =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  if (!re.test(value)) {
    callback(new Error('请输入正确手机号'))
  } else {
    callback()
  }
}

const checkConfirmPassword = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请再次输入密码'))
  }
  if (registerForm.password !== registerForm.confirmPassword) {
    callback(new Error('两次密码输入不同'))
  } else {
    callback()
  }
}

// 表单校验
const registerRules = reactive({
  // 验证用户名是否合法
  mobile: [
    {
      validator: checkphonenumber,
      trigger: 'blur'
    }
  ],
  // 验证密码是否合法
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      min: 8,
      message: '密码小于8位',
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    {
      validator: checkConfirmPassword,
      trigger: 'blur'
    }
  ]
})
</script>

<style lang="less" scoped>
.register {
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 100px;
  width: 1000px;
  padding: 50px 0;
  background-color: rgba(255, 255, 255, 0.61);
  .avatar {
    margin-left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ffffff;
    background-image: linear-gradient(90deg, #ffffff 0%, #b6f2ff 83%);
    box-shadow: 0 0 20px #72acb9;
    img {
      width: 200px;
      position: relative;
      left: -20px;
      top: 18px;
    }
  }
  h1 {
    text-align: center;
    margin-top: 50px;
    color: #585858;
    font-size: 30px;
  }
}
.el-form {
  margin-top: 50px;
  text-align: center;
  margin-left: 50%;
  transform: translateX(-50%);
  :deep(.el-form-item) {
    background-color: unset !important;
  }
  :deep(.el-input__inner) {
    height: 47px;
    background-color: rgba(255, 255, 255, 0.247);
    color: rgb(0, 0, 0) !important;
    border-radius: 40px;
  }
  .el-input {
    width: 500px;
    border-radius: 50%;
    background: transparent;
    ::-webkit-input-placeholder {
      color: #585858;
    }
  }
  .el-button {
    display: inline-block;
    margin: 50px 45px;
    width: 150px;
    border-radius: 20px;
    background-color: unset;
    color: #585858;
  }
}
.info {
  position: absolute;
  top: 0;
  // background-color: aqua;
}
</style>
